<template>
	<view class="search">
		<!-- 搜索组件 -->
		<my-input :status="false" v-model="inputVal" @enter="goSearch"></my-input>
		<view class="history" v-if="showHisroy">
			<view class="history-top">
				<view class="">
					历史记录
				</view>
				<view class="">
					删除
				</view>
			</view>
			<ul class="ul">
				<li class="li" v-for="(item,index) in history" :key="index">{{item}}</li>
			</ul>
		</view>
		 <!-- 扩展组件 -->
		<uni-list v-else>
			<uni-list-item v-for="(item,index) in list" showArrow :key="index" :title="item.goods_name" :to="'../../sub/pages/detail?id='+item.goods_id"></uni-list-item>
		</uni-list>
					 

	
	</view>
</template>

<script>
	import myInput from '../../components/myInput/myInput'
	import {getGoodsSearch} from '../../utils/api.js'
     // var timer
	export default {
		components:{
			myInput
		},
		data() {
			return {
				inputVal:'',
				list:[],
				history:[],//存放历史记录
				timer:null
				
			};
		},
		created() {
			this.history = uni.getStorageSync('history') || []
		},
		computed:{
			showHisroy(){
				if(this.list.length>0){
					return false
				}else{
					return true
				}
			}
		},
		methods:{
			goSearch(){
			
				// 如果输入框内容为空 不去发送请求
				if(!this.inputVal) return 
				// 触发搜索接口
				// trim() 去除首位空格
				getGoodsSearch({query:this.inputVal.trim()}).then(res=>{
					console.log(res);
					this.list = res
				})
				
			}
		},
		// 输入框内容发生变化就进行搜索  
		// 第一种 可以使用input框的input事件
		// 第二种 watch监听 监听输入框内容的变化
		
		
		watch:{
			inputVal(newVal,oldVal){
				 console.log(this.timer);
				// 进来的时候 如果上一次请求还没有执行结束 ，直接就结束掉 ，执行下一次的请求
				clearTimeout(this.timer)
				// 如果输入框内容为空 直接结束
				if(newVal=='') return 
				// 防抖 
			   this.timer = setTimeout(()=>{
				   getGoodsSearch({query:newVal.trim()}).then(res=>{
					this.list =res
					console.log(this.list);
					this.history.unshift(this.inputVal)
					// Set()  去重  Set() 数据结构 不允许出现重复的变量 利用他的这个特别可以对数组进行去重
					this.history = [...new Set(this.history)]
					// 存在本地
					uni.setStorageSync("history",this.history)
					console.log(this.history);
					
					
				   })
				   
			   },1000)		
				
				
				
			}
		}
		
	}
</script>

<style lang="scss">
.history-top{
	display: flex;
	align-items: center;
	height: 50rpx;
	justify-content: space-between;
	padding: 0 20rpx;
	
}
.ul{
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	
	.li{
		margin: 0 10rpx;
	     padding: 5rpx 10rpx;
		 font-size: 28rpx;
		 text-align: center;
		 background: #eee;
		 border-radius: 6rpx;
	}
}
</style>
